<!DOCTYPE html>
<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>Dom的使用-input</title>
</head>
<style>
    body {
        width: 100%;
        height: 100vh;
        background-color: wheat;
        font-size: 30px;
        text-decoration: none;
        font-family: "华文楷体";
    }

    p {
        font-size: 40px;
        margin: 20px 0 0 0;
        font-weight: bold;
    }

    span {
        /*display: block;*/
        line-height: 50px;
    }

    #check_box input, form input:first-child {
        width: 20px;
        height: 20px;
    }

    #btn input:hover {
        color: gray;
        transform: scale(1.1);
    }

    #btn input {
        width: 80px;
        height: 30px;
        font-size: 20px;
    }
</style>
<body>
<div id="content">
    <span>你爱好的运动是？</span>
    <form action="#">
        <span><input id="check_all" type="checkbox">全选/全不选</span>
        <div id="check_items">
            <span><input type="checkbox">足球</span>
            <span><input type="checkbox">篮球</span>
            <span><input type="checkbox">羽毛球</span>
            <span><input type="checkbox">乒乓球</span>
        </div>
        <div id="btn">
            <span><input id="btn1" type="button" name="" value="全选"></span>
            <span><input id="btn2" type="button" name="" value="全不选"></span>
            <span><input id="btn3" type="button" name="" value="反选"></span>
            <span><input id="btn4" type="button" name="" value="提交"></span>
        </div>
    </form>
</div>
<div id="last"></div>
</body>
<script>
    // 定义按钮的全局函数
    function obtainId(btn, fun) {
        let button = document.getElementById(btn)
        // 回调函数fun
        button.onclick = fun
    }

    // 获取指定对象的dom
    let check_items = document.getElementById("check_items")
    let input = check_items.getElementsByTagName("input")


    //"给全选/全不选"checkbox绑定事件
    let check_All = document.getElementById("check_all")
    check_All.onclick = function () {
        if (check_All.checked === true) {
            for (let i = 0; i < input.length; i++) {
                input[i].checked = true
            }
        } else {
            for (let i = 0; i < input.length; i++) {
                input[i].checked = false
            }
        }

    }

    // 给全选按钮绑定事件
    obtainId("btn1", function () {
        for (let i = 0; i < input.length; i++) {
            input[i].checked = true
        }
        check_All.checked = true
    })
    // 给全不选按钮绑定事件
    obtainId("btn2", function () {
        for (let i = 0; i < input.length; i++) {
            input[i].checked = false
        }
        check_All.checked = false
    })
    // 给反选按钮绑定事件
    obtainId("btn3", function () {
        for (let i = 0; i < input.length; i++) {
            // if (input[i].checked === true) {
            //     input[i].checked = false
            // } else {
            //     input[i].checked = true
            // }

            // 给自身取反值
            input[i].checked = !input[i].checked

            //点击反选时  如果四个input都选中了,"全选/全不选"选择框也选中,要是一个未选择就不打勾
            check_All.checked = true
            for (let j = 0; j < input.length; j++) {
                if (input[j].checked !== true) {
                    check_All.checked = false
                    break
                }
            }
        }
    })
    //提交按钮
    obtainId("btn4", function () {
        let content = ""
        for (let i = 0; i < input.length; i++) {
            if (input[i].checked === true) {
                //nextSibling() 返回元素节点之后的兄弟节点（包括文本节点、注释节点）
                //nodeValue属性获取该文本节点的文本内容
                let text = input[i].nextSibling.nodeValue
                content += text + "、\n"
            }
        }
        // let outputElement = document.createElement("div");
        let outputElement = document.getElementById("last");
        outputElement.style.width = "500px"
        outputElement.style.height = "300px"
        outputElement.style.backgroundColor = "grey"
        outputElement.textContent = "我爱好的运动:" + content;
        // document.body.appendChild(outputElement);
    })
    //给4给爱好设置事件 当一个未选择时"全选/不全选"就不选择  都选择就打勾
    for (let i = 0; i < input.length; i++) {
        input[i].onclick = function () {
            check_All.checked = true
            for (let j = 0; j < input.length; j++) {
                if (input[j].checked !== true) {
                    check_All.checked = false
                    break
                }
            }
        }
    }
</script>
</html>